<template>
	<view class="container">
		<view class="top" :style="{ backgroundImage: 'url(' + hbbj + ')' }">
			<text @click="qpt" :class="[currentTab == 0 ? 'hb' : '']">全平台红包</text>
			<text @click="bkn" :class="[currentTab == 1 ? 'hb' : '']">板块内红包</text>
		</view>
		<view v-if="currentTab == 1" class="u-m-l-20">
				<u-form class="bknhb" :model="model" :rules="rules" ref="uForm" :errorType="errorType">
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="企业名称" prop="qymc">
						<u-input :border="border" placeholder="请输入企业名称" v-model="model.qymc" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="红包描述" label-width="250" prop="hbms">
						<u-checkbox-group @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
							<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="红包金额" prop="money">
						<u-input :border="border" placeholder="请输入金额     元" v-model="model.money" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="红包个数" prop="hbgs">
						<u-input :border="border" placeholder="请输入个数   个" v-model="model.hbgs" type="text" input-align="right"></u-input>
					</u-form-item>
				</u-form>
				<u-form-item class="  zwpj  u-m-r-30 " :label-position="labelPosition"  prop="zwpj">
					<u-input  type="textarea" :border="border" placeholder="请输入您的祝福语吧！" v-model="model.zwpj" />
				</u-form-item>
				<view class="">
					<view class="jq">
						<text class="">￥{{model.money}}</text>
					</view>
					
					<u-button class="button" @click="submit">塞钱进红包</u-button>
				</view>
		</view>
		<view v-if="currentTab == 0" class="u-m-l-20">
				<u-form class="qpthb" :model="model" :rules="rules" ref="uForm" :errorType="errorType">
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="企业名称" prop="qymc">
						<u-input :border="border" placeholder="请输入企业名称" v-model="model.qymc" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="红包描述" label-width="250" prop="hbms">
						<u-checkbox-group @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
							<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="红包范围" label-width="250" prop="hbms">
						<u-checkbox-group @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
							<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList1" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="到账方式" label-width="250" prop="hbms">
						<u-checkbox-group @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
							<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList2" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="红包金额" prop="money">
						<u-input :border="border" placeholder="请输入金额     元" v-model="model.money" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="红包个数" prop="hbgs">
						<u-input :border="border" placeholder="请输入个数   个" v-model="model.hbgs" type="text" input-align="right"></u-input>
					</u-form-item>
				</u-form>
				<u-form-item class="  zwpj  u-m-r-30 " :label-position="labelPosition"  prop="zwpj">
					<u-input  type="textarea" :border="border" placeholder="请输入您的祝福语吧！" v-model="model.zwpj" />
				</u-form-item>
				<view class="">
					<view class="jq">
						<text class="">￥{{model.money}}</text>
					</view>
					
					<u-button class="button" @click="submit">塞钱进红包</u-button>
				</view>
		</view>
	</view>
</template>

<script>
	export default{
		
		data(){
			return{
				hbbj:"../../static/img/hbtbbj.png",
				currentTab: 0,
				
				model: {
					ws: '',
					wxy: '',
					wyx: '',
					qymc: '',
					zyp: '',
					money:"",
				},
				selectList: [
					{
						value: '测试1',
						label: '测试1'
					},
					{
						value: '测试2',
						label: '测试2'
					},
					{
						value: '测试3',
						label: '测试3'
					}
				],
				checkboxList: [
					{
						name: '推广',
						checked: false,
						disabled: false
					},
					{
						name: '慰问',
						checked: false,
						disabled: false
					},
					{
						name: '娱乐',
						checked: false,
						disabled: false
					},
				],
				checkboxList1: [
					{
						name: '全国',
						checked: false,
						disabled: false
					},
					{
						name: '行业',
						checked: false,
						disabled: false
					},
					{
						name: '同城',
						checked: false,
						disabled: false
					},
				],
				checkboxList2: [
					{
						name: '即时',
						checked: false,
						disabled: false
					},
					{
						name: '页面浏览',
						checked: false,
						disabled: false
					},
				],
				rules: {
					zyp: [
						{
							required: false,
							message: '请选择招/应聘',
							trigger: 'change'
						}
					],
					ws: [
						{
							required: false,
							message: '请选择我是',
							trigger: 'change'
						}
					],
					wxy: [
						{
							required: false,
							message: '请选择我需要',
							trigger: 'change'
						}
					],
					wyx: [
						{
							required: false,
							message: '请选择我意向',
							trigger: 'change'
						}
					]
				},
				required: false,
				border: false,
				check: false,
				selectStatus: 'close',
				selectShowZyp: false,
				selectShowWs: false,
				selectShowWxy: false,
				selectShowWyx: false,
				selectShowQylx: false,
				selectShowQydy: false,
				selectShowLyxy: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['toast'],
			}
		},
		methods:{
			qpt(){
				this.currentTab = 0;
			},
			bkn(){
				this.currentTab = 1;
			}
		},
		
	}
</script>

<style scoped lang="scss">
page {
	background-color: #F4F4F4;
}
	.top {
		background-repeat: no-repeat;
		background-size: 100% 500rpx;
		background-position: 0 -20px;
	
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		padding: 58rpx 30rpx 450rpx 30rpx;
		text{
			color: #FFFFFF;
			font-size: 28rpx;
		}
		.hb{
			width: 226rpx;
			height: 60rpx;
			background: #E04A24;
			border-radius: 30rpx;
			text-align: center;
			line-height: 60rpx;
		}
		
	}
	.zwpj{
			width: 710rpx;
			height: 193rpx;
			background-color: #FFFFFF;
			margin-top: 20rpx;
			font-size: 30rpx;
			color: #888D99;
			border-radius: 20rpx;
			line-height: 44rpx;
		}
		.bknhb{
			margin-top: -400rpx;
			width: 710rpx;
			height: 470rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
		}
		.button {
			width: 662rpx;
			margin:50rpx auto 102rpx auto;
			background: #EA5E3A;
			border-radius: 40rpx;
			border: 0;
			color: #fff;
			&.u-hairline-border:after {
				border: 0;
			}
		}
		.jq{
			color: #0D1D36;
			font-size: 50rpx;
			font-weight: bold;
			margin-left: 256rpx;
			margin-top: 160rpx;
		}
		.qpthb{
			margin-top: -400rpx;
			width: 710rpx;
			height: 700rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
		}
</style>
